<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="../js/vue.js"></script>
		<style>
			.activated{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
<!--			<div @click='handDivClick'
				 :class="{activated: isActivated}"
			>
				Hello World
			</div>-->
<!--			<div @click='handDivClick'
				:class="[activated,activityOne]"
			>
				Hello World
			</div>-->
			<div @click='handDivClick'
					
					:style='[styleObj,{fontSize:"20px"}]'
				>
				<!--:style='styleObj'-->
					Hello World
			</div>
			
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					// isActivated:false
					// activated:''
					// activityOne:'ddd'
					styleObj:{
						color:'red'
					}
				},
				methods:{
					handDivClick:function () {
					    // this.isActivated=!this.isActivated;	
			/* 			if(this.activated==='activated'){
							this.activated='';
						}else{
							this.activated='activated';
						} */
						
						//三目运算符
						// this.activated = this.activated==='activated' ? '' :'activated';
						
						
						this.styleObj.color=this.styleObj ==='black' ? 'red':'black'
					}
				}
			})
		</script>
	</body>
</html>